<template>
  <div class="echarts-container" ref="charts"></div>
  <div class="top">
    <!--    <h1>航向</h1>-->
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import * as echarts from 'echarts';
import {onBeforeMount, onBeforeUnmount, onMounted, ref, watch} from "vue";
//获取图形的DOM节点
let charts = ref();
let headAngle = 18
let pieNum = (headAngle * 100) / 360
let colorSet = {
  color: 'rgba(59,191,253,1)',
}

let option = {
  // backgroundColor: '#1b2735',
  series: [
    {
      name: '内部进度条',
      type: 'gauge',
      radius: '80%',
      startAngle: 90, // 仪表盘起始角度
      endAngle: 450, // 仪表盘结束角度（0度代表正上方）
      min: 0,
      max: 360,
      // detail: {show: false},
      splitNumber: 4,
      splitLine: {
        show: true,
        distance: 0,
        length: 4,
        lineStyle: {
          color: '#ddd', //用颜色渐变函数不起作用
          width: 1,
        },
      },
      axisLine: {
        lineStyle: {
          color: [
            [headAngle / 360, colorSet.color],
            [1, colorSet.color],
          ],
          width: 2,
        },
      }, //仪表盘轴线
      axisLabel: {
        show: false,
        color: '#ffffff',
        fontSize: 20,
        fontWeight: 'bold',
        distance: -45,
      },
      axisTick: {
        show: false,
      },
      itemStyle: {
        color: '#ffffff',
      },
      detail: {
        show: true,
        formatter: (value: any) => {
          if (value !== 0) {
            let num = Math.round(value)
            return parseInt(num as any).toFixed(0) + '°'
          } else {
            return 0
          }
        },
        offsetCenter: ['0', '80%'],
        fontSize: 25,
        fontWeight: '800',
        color: '#f34995',
      },
      title: {
        show: true,
        offsetCenter: [0, '100%'],

        color: '#fff',
        fontSize: 20, //表盘上的标题文字大小
        fontWeight: 400,
      },
      data: [
        {
          value: headAngle,
          // name: this.title,
        },
      ],
      pointer: {
        show: true,
        length: '50%',
        width: "50%",
        icon: 'path://M700.065799 373.027761q116.507301 104.243374 209.508743 189.068865 39.857761 35.769785 77.671534 71.028574t67.451595 63.36362 47.522715 47.011718 17.884893 21.972868l0 61.319632q0 4.087975-17.884893-1.532991t-47.522715-17.373896-67.451595-27.593834-77.671534-33.214801q-93.001442-40.879755-209.508743-95.04543l0 193.156841q26.571841 19.417883 50.077699 37.813773 20.439877 15.329908 40.879755 30.148819t31.68181 22.994862q13.28592 9.197945 15.329908 18.906887t2.043988 22.994862l0 34.747791q0 8.175951-16.862899 10.730936t-40.368758-8.686948q-11.241933-6.131963-40.879755-18.39589t-63.36362-26.571841-64.896611-26.571841-46.500721-18.39589q-2.043988 0-3.576979-0.510997t-3.576979-0.510997-3.576979 0.510997-3.576979 0.510997q-15.329908 6.131963-46.500721 18.39589t-64.896611 26.571841-63.36362 26.571841-40.879755 18.39589q-23.505859 11.241933-40.368758 8.686948t-16.862899-10.730936l0-34.747791q0-13.28592 2.043988-22.994862t15.329908-18.906887q11.241933-8.175951 31.68181-22.994862t40.879755-30.148819q23.505859-18.39589 50.077699-37.813773l0-193.156841q-117.529295 54.165675-210.530737 95.04543-39.857761 17.373896-77.160537 33.214801t-66.940598 27.593834-47.522715 17.373896-17.884893 1.532991l0-61.319632q0-3.065982 17.884893-21.972868t47.522715-47.011718 66.940598-63.36362 77.160537-71.028574q93.001442-84.825491 210.530737-189.068865l0-231.992608q0-34.747791 10.219939-58.764647t25.549847-39.346764 33.214801-23.505859 33.725798-12.263926 26.060844-4.598972 11.241933-0.510997l10.219939 0q11.241933 1.021994 27.082837 5.109969t33.725798 12.263926 33.214801 23.505859 25.549847 39.346764 10.219939 58.764647l0 231.992608z',
        offsetCenter: [0, "25%"] // 修改偏移中心点为[0, 0]
      },

      animationDuration: 1000,
      z: 8,
    },
    {
      type: 'pie',
      name: '内层细圆环',
      radius: ['20%', '58%'],
      emphasis: {
        scale: false,
      },
      z: 2,

      startAngle: 90,
      itemStyle: {
        color: [
          [
            headAngle / 360,
            new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: 'rgba(59,191,253,0.1)',
              },
              {
                offset: 0.5,
                color: 'rgba(59,191,253,0.4)',
              },
              {
                offset: 1,
                color: 'rgba(59,191,253,0.6)',
              },
            ]),
          ],
        ],
      },
      label: {
        show: false,
      },
      data: [
        {
          value: pieNum,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(59,191,253,0.1)',
              },
              {
                offset: 0.5,
                color: 'rgba(59,191,253,0.4)',
              },
              {
                offset: 1,
                color: 'rgba(59,191,253,0.6)',
              },
            ]),
          },
        },
        {
          value: 100 - pieNum,
          itemStyle: {
            color: 'rgba(255,255,255,0)',
          },
        },
      ],
      animation: true,
    },
    {
      type: 'pie',
      name: '内层细圆环',
      radius: ['62%', '70%'],
      emphasis: {
        scale: false,
      },
      z: 2,
      startAngle: 90,
      itemStyle: {
        color: 'rgba(59,191,253,1)',
      },
      label: {
        show: false,
      },
      data: [
        {
          value: pieNum,
          itemStyle: {
            color: 'rgba(59,191,253,1)',
          },
        },
        {
          value: 100 - pieNum,
          itemStyle: {
            color: 'rgba(255,255,255,0)',
          },
        },
      ],
      animation: true,
    },
    {
      name: '内部小环',
      type: 'gauge',
      radius: '40%',
      axisLine: {
        lineStyle: {
          color: [[1, colorSet.color]],
          width: 1,
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      itemStyle: {
        color: '#ffffff',
      },
      detail: {
        show: false,
      },
      title: {
        show: false,
      },
      pointer: {
        show: false,
      },
    },
  ],
};
let updateDataInterval: any = null; // 用于存储定时器引用
let mycharts: echarts.ECharts;
onMounted(() => {
  //初始化echarts实例
  mycharts = echarts.init(charts.value);
  //设置配置项
  setGaugeOption(headAngle);
})

// 定义一个函数用来设置图表配置，以便在数据更新时复用
const setGaugeOption = (angle: number) => {
  // 根据headAngle计算pieNum
  pieNum = (angle * 100) / 360;

  // 更新option中的数据
  //@ts-ignore
  option.series[0].data[0].value = angle; // 更新仪表盘数据
  //@ts-ignore
  option.series[1].data[0].value = pieNum; // 更新内层圆环数据
  //@ts-ignore
  option.series[2].data[0].value = pieNum; // 同步更新第二个圆环数据

  mycharts.setOption(option);
};

// 动画数据
let fakeHeadAngArr = [1, 35, 38, 40, 46, 50, 54, 60, 63, 65, 72, 85, 60];
let count = ref(0)

watch(count, () => {
  if (count.value > fakeHeadAngArr.length - 1) {
    count.value = 0;
  }
  setGaugeOption(fakeHeadAngArr[count.value]);
});


// 获取数据
onBeforeMount(() => {
  updateDataInterval = setInterval(() => {
    count.value++;
  }, 1000); // 每隔1秒更新一次数据
});

// 清理定时器，避免内存泄漏
onBeforeUnmount(() => {
  if (updateDataInterval) {
    clearInterval(updateDataInterval);
    updateDataInterval = null;
  }
});


</script>

<style scoped lang="scss">
.top {
  //height: 40px;
  margin-top: -20px;
  line-height: 40px;
  color: white;
  text-align: center;
  font-size: 25px;
}

.echarts-container {
  height: 100%;
  width: 97%;
  margin-left: -10px;
  //background-color: #93efc2;
}

</style>